<script setup lang="ts">
import JsBarcode from 'jsbarcode'
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()

const { name, code, styleCode, color, productSize, price } = route.query

const barcodeRef = ref(null)
const handleCode = () => {
  const options = {
    // format: 'EAN13', // 格式
    height: 50,
    // text: "覆盖显示的文本",
    fontSize: 16,
    // background: '#ccc',
    lineColor: 'black',
  }
  JsBarcode(barcodeRef.value, code as any, options)
}

onMounted(() => {
  handleCode()
})
</script>

<template>
  <div class="code-wrapper">
    <div class="code-item-wrapper">
      <div class="code-item">商品名: {{ name }}</div>
      <div class="code-item">款号: {{ styleCode }}</div>
      <div class="code-item">颜色: {{ color }}</div>
      <div class="code-item">尺码: {{ productSize }}</div>
      <div class="code-item">商品价: {{ price }} 元</div>
    </div>
    <svg ref="barcodeRef" class="code"></svg>
  </div>
</template>

<style lang="scss" scoped>
.code-wrapper {
  width: 5cm;
  height: 6.5cm;
  border: 1px solid #333;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .code-item-wrapper {
    padding: 0 10px;
    padding-top: 10px;
  }
  .code {
    width: 100%;
  }
}
</style>
